<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import type { classDataVo } from '@/types/StudentType.ts'
const classData = ref<classDataVo>()
const dataList = async () => {
  const res = await axios.get('/api/student/classData')
  if (res.data.code === 0) {
    classData.value = res.data.data
  }
}
dataList()
</script>

<template>
  <div>
    <div class="data">
      <el-card style="max-width: 100%; margin-bottom: 10px">
        <el-row v-model="classData">
          <el-col :span="6">
            <el-statistic title="班级总人数" :value="classData?.totalPeople" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="当前在校人数" :value="classData?.presentPeople" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="今日请假人数" :value="classData?.absentPeople" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="长期请假人数" :value="classData?.latePeople" />
          </el-col>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.el-col {
  text-align: center;
}
</style>
